<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="http://www.itcast.cn" @click="fn1">点我</a>

        <!-- 打印事件对象 -->
        <button @click="fn2">点我-不加小括号</button>
         <!-- 打印undefined -->
        <button @click="fn2()">点我-加小括号</button>
        <!-- 打印99 -->
        <button @click="fn2(99)">点我-加小括号-写参数</button>

        <!-- 
            总结：
                vue里绑定事件时，
                    如果方法名后面不加小括号，绑定的方法默认有参数，只不过参数是事件对象
                    如果方法名后面加了小括号，代表要传递参数，此时你传什么参数就是什么，如果毛都没传，参数就是undefined

                建议：如果要拿事件对象，不加小括号
         -->


         <!-- 如果既想传参，又想拿到事件对象，就用`$event`来显式的传递事件对象 -->
         <!-- 也就是说 $event就代表事件对象 -->
         <button @click="fn3(33, $event)">点我-既想传参-又想拿到事件对象</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    
                }
            },
            methods: {
                fn3 (num, e) {
                    console.log(num, e)
                },
                // 形参e就是事件对象
                fn1 (e) {
                    console.log(e)
                    e.preventDefault()
                },

                fn2 (e) {

                    console.log(e)
                }
            }
        })
    </script>
</body>
</html>